import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import http from '../../utils/http'
import styles from './index.module.css'
import { useNavigate } from 'react-router-dom'
function Index() {
    const navigate = useNavigate()
    const { start, end, date } = useSelector((state) => state.CitySlice)
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const getList = async () => {
        const res = await http.post('/api/trip/train', {
            start,
            end,
            date,
            page
        })

        console.log(res);

        const { code, data } = res.data

        if (code === 200) {
            setList([...list, ...data])
            setPage((prev) => prev + 1)
        }

    }

    useEffect(() => {
        getList()
    }, [])

    const handledetail = (item) => {
        navigate('/detail',{state:item})
    }
    return (
        <div>
            {
                list?.map((item, ind) => (
                    <div key={ind} className={styles.list_wroe} onClick={() => handledetail(item)}>
                        <div className={styles.lists_wroe}>
                            <span>{item.start}</span>
                            <span>{item.startTime}</span>
                            <span>{item.end}</span>
                            <span>商务座 <b>有票</b></span>
                            <span>一等座 <b>有票</b></span>
                            <span>二等座 <b>有票</b></span>
                        </div>
                        <div className={styles.listss_wroe}>
                            {item.tick.secondTick}
                        </div>
                    </div>
                ))
            }
        </div>
    )
}

export default Index
